<template>
  <el-dialog :visible.sync="visible"
             :before-close="beforeClose"
             :show-close="true"
             :modal="true" :destroy-on-close="true"
             :close-on-press-escape="closeOnPressEscape"
             :close-on-click-modal="closeOnClickModal"
             width="600px">
    <i class="el-icon-user-solid" slot="title"> 用户登录</i>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="form.username" placeholder="请输入您的域帐号"
                  suffix-icon="el-icon-user"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" placeholder="请输入您的域密码" type="password" suffix-icon="el-icon-key">></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer">
     <el-button type="primary" @click="onSubmit" icon="el-icon-check">登录</el-button>
     <el-button @click="doCancle" icon="el-icon-close">取消</el-button>
    </span>
  </el-dialog>

</template>
<script>
import axios from 'axios'
import qs from 'qs'

export default {
  name: "login",
  props: {isPage: false, loginUrl: null},
  data() {
    return {
      visible: true,
      showClose: true,
      closeOnPressEscape: false,
      closeOnClickModal: false,
      form: {
        client_id: "testclient",
        client_secret: "testclient",
        scope: "test",
        grant_type: "password"
      }
    }
  },
  mounted: function () {
  },
  methods: {
    onSubmit: function () {
      axios({
        method: "post",
        url: this.$props.loginUrl,
        data: qs.stringify(this.form),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
        }
      }).then(response => {
        if (response.data) {
          this.sessionStore.set("user", response.data)
          this.visible = false;
          this.requestAgain();
        }
      }).catch(error => {
        console.log("用户登录失败")
      })
    },
    requestAgain() {
      while (this.sessionStore.get("request_queue").length > 0) {
        let requests = this.sessionStore.get("request_queue");
        let idx = requests.length - 1;
        let config = requests[idx];
        requests.splice(idx, 1);
        this.sessionStore.set("request_queue", requests);
        console.log(config)
      }
    },
    doCancle: function () {
      this.visible = false;
    },
    beforeClose: function (done) {
      done();
    }
  }
}
</script>
<style scoped>
</style>
